<template>
    <div class="personalCenterView">
        <div class="personalCenter">
            <div class="personalCenterHeader">
                <!-- 信息简介 -->
                <div class="personalCenterInfoBox">
                    <div class="personalCenterInfo">
                        <!-- 头像 -->
                        <div class="avatar">
                            <img :src="userInfo?.avatarPath ? (baseUrl + userInfo?.avatarPath ) : userAvatar()" alt="">
                        </div>
                        <!-- 个人信息 -->
                        <div class="information">
                            <div class="name">
                                {{ userInfo?.nickName }}
                            </div>
                            <div class="introduce">
                                {{ userInfo?.resume?.trim() ? userInfo.resume : '他还未填写个人简介~~~' }}
                            </div>
                        </div>
                    </div>
                    <!-- 退出登录 -->
                    <div class="logoutButton" @click="handleLogout">
                        <span class="iconfont icon-likesprogramtuichudenglu"></span>
                        退出登录
                    </div>
                </div>
                <!-- 导航栏 -->
                <div class="navigation">
                    <router-link class="navigationItem" to="/personalCenter" exact>
                        <span class="line"></span>
                        个人资料
                    </router-link>
                    <router-link class="navigationItem" to="/personalCenter/myCourse" exact>
                        <span class="line"></span>
                        我的课程
                    </router-link>
                    <router-link class="navigationItem" to="/personalCenter/myCollection" exact>
                        <span class="line"></span>
                        我的收藏
                    </router-link>
                    <router-link class="navigationItem" to="/personalCenter/learningRecord" exact>
                        <span class="line"></span>
                        学习记录
                    </router-link>
                </div>
            </div>
            <div class="personalCenterContent">
                <router-view />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { userApi } from '@/api/Users';
import { userAvatar } from '@/types/Base64Image';
import { UserData } from '@/types/UserData';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { baseUrl } from '@/util/request';
export default {
    name: 'personalCenterView',
}
</script>

<script setup lang="ts">
const userInfo = ref<UserData>();
onMounted(() => {
    userApi.getLoginUserData().then((res) => {
        console.log(res);
        userInfo.value = res;
    });
});

const router = useRouter();

// 获取默认头像
const getDefaultAvatar = () => {
    return userAvatar();
};

// 退出登录
const handleLogout = () => {
    userInfo.value = null;
    userApi.logout();
    router.push('/loginRegister');
};
</script>

<style src="@/assets/icons/iconfont.css" scoped></style>

<style scoped>
.personalCenterView {
    width: var(--width);
    padding: 20px 0px;
    height: 100%;
}

.personalCenterView .personalCenter {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
    background-color: rgba(245, 247, 250, .4);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* 个人中心头部 */
.personalCenterView .personalCenter .personalCenterHeader {
    width: 100%;
    height: 180px;
}

/* 个人信息 */
.personalCenterView .personalCenter .personalCenterHeader .personalCenterInfoBox {
    width: 100%;
    height: calc(100% - 45px);
    padding: 20px;
    padding-bottom: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.personalCenterView .personalCenter .personalCenterHeader .personalCenterInfoBox .personalCenterInfo {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.personalCenterView .personalCenter .personalCenterHeader .personalCenterInfoBox .personalCenterInfo .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid rgba(100, 100, 100, .5);
}

.personalCenterView .personalCenter .personalCenterHeader .personalCenterInfoBox .personalCenterInfo .avatar img {
    width: 100%;
    height: 100%;
}

.personalCenterView .personalCenter .personalCenterHeader .personalCenterInfoBox .personalCenterInfo .information {
    width: calc(100% - 60px);
    padding-left: 20px;
}

.personalCenterView .personalCenter .personalCenterHeader .personalCenterInfoBox .personalCenterInfo .information .name {
    width: 100%;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.personalCenterView .personalCenter .personalCenterHeader .personalCenterInfoBox .personalCenterInfo .information .introduce {
    width: 100%;
    font-size: 14px;
    color: rgba(100, 100, 100, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 退出登录按钮 */
.personalCenterView .personalCenter .personalCenterHeader .personalCenterInfoBox .logoutButton {
    min-width: 100px;
    height: 40px;
    cursor: pointer;
    display: flex;
    margin-left: 20px;
    font-size: 14px;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 1);
    transition: .3s all;
    background-color: rgba(65, 185, 255, 1);
}

.personalCenterView .personalCenter .personalCenterHeader .personalCenterInfoBox .logoutButton .iconfont {
    margin-right: 5px;
    font-size: 18px;
}

.personalCenterView .personalCenter .personalCenterHeader .personalCenterInfoBox .logoutButton:hover {
    background-color: rgba(65, 185, 255, .8);
}

.personalCenterView .personalCenter .personalCenterHeader .personalCenterInfoBox .logoutButton:active {
    background-color: rgba(65, 185, 255, 1);
    color: rgba(255, 255, 255, .8);
    transition: .1s all;
}

/* 导航栏 */
.personalCenterView .personalCenter .personalCenterHeader .navigation {
    width: 100%;
    height: 45px;
    padding: 0px 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.personalCenterView .personalCenter .personalCenterHeader .navigation .navigationItem {
    width: 100px;
    height: 100%;
    margin-right: 20px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    color: rgba(0, 0, 0, 1);
    transition: .3s all;
}

.personalCenterView .personalCenter .personalCenterHeader .navigation .navigationItem .line {
    width: 40px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0px;
    display: none;
    border-bottom: 2px solid rgba(65, 185, 255, 1);
}

/* 当前页面 */
.personalCenterView .personalCenter .personalCenterHeader .navigation .navigationItem.router-link-exact-active {
    color: rgba(65, 185, 255, 1);
}

.personalCenterView .personalCenter .personalCenterHeader .navigation .navigationItem.router-link-exact-active .line {
    display: flex;
}

.personalCenterView .personalCenter .personalCenterHeader .navigation .navigationItem:hover {
    color: rgba(65, 185, 255, 1);
}

.personalCenterView .personalCenter .personalCenterHeader .navigation .navigationItem:active {
    color: rgba(65, 185, 255, .7);
    transition: .1s all;
}

.personalCenterView .personalCenter .personalCenterHeader .navigation .navigationItem:active .line {
    border-bottom: 2px solid rgba(65, 185, 255, .7);
}

.personalCenterView .personalCenter .personalCenterHeader .navigation .navigationItem:hover .line {
    display: flex;
}

/* 内容 */
.personalCenterView .personalCenter .personalCenterContent {
    width: 100%;
    height: calc(100% - 180px);
    padding: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(245, 247, 250, .5);
}
</style>